<template>
	<gracePage headerBG="#FFFFFF" :bounding="false">
		<view slot="gHeader" class="grace-bg-white">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">设置</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons"></text>
			</view>
		</view>
		<view slot="gBody" class="grace-body">
			<view class="grace-list-items" @tap="upload">
				<view class="grace-list-body grace-border-b grace-space-between">
					<view class="grace-list-title"><text class="grace-list-title-text">头像</text></view>
					<image :src="loginStatus ? userInfo.user_picture : '/static/images/noLogin.png'" style="width: 50rpx;height: 50rpx;"></image>
				</view>
				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
			</view>
			<view class="grace-list-items">
				<view class="grace-list-body grace-border-b grace-space-between">
					<view class="grace-list-title"><text class="grace-list-title-text">账号</text></view>
					<text class="grace-desc grace-black6">{{ userInfo.mobile_phone }}</text>
				</view>
				<text class="grace-list-arrow-right grace-icons "></text>
			</view>
			<view class="grace-list-items" @tap="showDialog2">
				<view class="grace-list-body grace-border-b grace-space-between">
					<view class="grace-list-title"><text class="grace-list-title-text">用户名</text></view>
					<text class="grace-desc grace-black6">{{ userInfo.user_name }}</text>
				</view>
				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
			</view>
			<view class="grace-list-items" @click="gotoPage('/pages/homeBox/editPassword/editPassword')">
				<view class="grace-list-body">
					<view class="grace-list-title"><text class="grace-list-title-text">修改密码</text></view>
				</view>
				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
			</view>
			<view style="height: 400rpx;"></view>
			<view class="mx-5">
				<button type="primary" plain="true" class="grace-tbr-large " v-if="loginStatus" style="color: #1CA376;border: 1rpx solid #1CA376;" @click="logoutEvent">
					退出登录
				</button>
				<button type="primary" plain="true" class="grace-tbr-large " v-else style="color: #1CA376;border: 1rpx solid #1CA376;" @click="gotoLogo">去登录</button>
			</view>
			<!--修改用户名-->
			<graceDialog ref="graceDialog2" title="修改用户名"  v-on:closeDialog="closeDialog2">
				<view class="content2" slot="content">
					<view class="px-3 grace-flex-center">
						<input type="text" class="grace-form-input text-center" focus v-model="editName" placeholder="请输入内容" />
					</view>
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog2">关闭</text>
					<text class="grace-dialog-buttons grace-blue" @tap="confirm2">确认</text>
				</view>
			</graceDialog>
			<!-- 裁剪组件 -->
			<!-- 请通过 :cropWidth="cropWidth" :cropHeight="cropHeight" 来调剪裁的宽度和高度 -->
			<graceImageCrop :src="tempFilePath" @confirm="confirm" @cancel="cancel" :cropWidth="cropWidth" :cropHeight="cropHeight"></graceImageCrop>
			<!-- 支付宝小程序兼容代码 -->
			<!--  #ifdef MP-ALIPAY -->
			<canvas id="myCanvas" canvas-id="myCanvas" class="meslist_canvas" :crop-width="cropWidth" :crop-height="cropHeight"></canvas>
			<!--  #endif-->
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceBorderRadius from '@/graceUI/components/graceBorderRadius.vue';
import graceImageCrop from '@/graceUI/components/graceImageCrop.vue';
import { mapState, mapMutations ,mapActions} from 'vuex';
export default {
	data() {
		return {
			editName:'',
			oneGoStatus:true,
			tempFilePath: '',
			cropFilePath: '',
			cropWidth: 200,
			cropHeight: 200
		};
	},
	
	
	computed: {
		...mapState({
			loginStatus: state => state.user.loginStatus,
			userInfo: state => state.user.userInfo
		})
	},
	created() {
		this.init();
	},
	onLoad() {
		this.editName = this.userInfo.user_name;
	},
	methods: {
		...mapActions(['getUserInfo']),
		...mapMutations(['logout']),
		init() {
			console.log(this.userInfo);
		},
		gotoLogo() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		logoutEvent() {
			this.$HTTP.postStatus('/api/api.php', { act: 'logout' }, { token: true }).then(res => {
				// 退出登录
				this.logout();
				uni.showToast({
					title: '退出成功',
					icon: 'none'
				});
				uni.navigateBack({
					delta: 1
				});
			});
		},
		showDialog2: function() {
			this.$refs.graceDialog2.open();
		},
		closeDialog2: function() {
			this.$refs.graceDialog2.hide();
		},
		confirm2: function() {
			if(this.editName == '') return;
			this.closeDialog2();
			// uni.showToast({ title: '您点击了确认按钮', icon: 'none' });
			this.$HTTP.post('/api/api.php', {act:'edit_name',user_name:this.editName}, { token: true });
			// 重新获取用户信息
			this.getUserInfo();
		},
		gotoPage(url) {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: url,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		upload() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					console.log('res', res);
					this.tempFilePath = res.tempFilePaths[0];
				}
			});
		},
		confirm(e) {
			// console.log(e);
			// 图片保存在 e.detail.tempFilePath
			// h5 端为 base64 格式使用 uni.request 传递给后端保存成图片 ***.png (如 php : file_put_contents('test.png', $_POST['图片数据']));
			// 其他端使用 uni.upload 以上传的方式发送给后端
			this.tempFilePath = '';
			this.cropFilePath = e.detail.tempFilePath;
			let _this = this;
			uni.uploadFile({
				url: 'https://zhenzhixiao.cn/api/upload_form.php', //仅为示例，非真实的接口地址
				filePath: this.cropFilePath,
				name: 'file',
				formData: {
					user_id: this.userInfo.user_id,
					type: '3'
				},
				success: uploadFileRes => {
					// 更新 用户信息
					_this.getUserInfo();
				}
			});
		},
		cancel() {
			console.log('canceled');
		}
	},
	components: {
		gracePage,
		graceBorderRadius,
		graceImageCrop
	}
};
</script>
<style scoped>
	.ucenter-face {
		width: 100rpx !important;
		height: 100rpx !important;
	}
	.ucenter-face-image {
		width: 100rpx !important;
		height: 100rpx !important;
	}
	.ucenter-line {
		height: 12rpx;
		background-color: #f4f5f6;
		margin: 16rpx 0;
	}
</style>
